<template>
  <div>
    <div class="wrap-header">
        <div class="img"></div>
        <div class="Thelogin" @click="gotothelogin">立即登录</div>
        <div class="integral">积分：0</div>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <div class="The">
      <div>
        <span class="iconfont icon-dingdan"></span>
        <span>我的订单</span>
      </div>
      <div>
        <span class="iconfont icon-icon-right"></span>
      </div>
    </div>
    <paymetnoe :list="list"></paymetnoe>
    <paymentTow :listx="listx"></paymentTow>
    <div class="Abottom">
      The work of liu tao
    </div>
  </div>
</template>

<script>
import paymetnoe from '../components/payment/paymetnoe'
import paymentTow from '../components/payment/paymentTow'
export default {
  components:{
    paymetnoe,
    paymentTow
  },
  data() {
    return {
      list:[
        {
          icon:"paid",
          name:"待付款"
        },
        {
          icon:"send-gift-o",
          name:"待发货"
        },
        {
          icon:"logistics",
          name:"待收货"
        },
        {
          icon:"comment-o",
          name:"待评价"
        }
      ],
      listx:[
        {
          icon:"gold-coin-o",
          name:"我的余额",
          color:"#F86650"
        },
        {
          icon:"edit",
          name:"我的余额",
          color:"#F86650"
        },
        {
          icon:"coupon-o",
          name:"我的余额",
          color:"#EDB449"
        },
        {
          icon:"star-o",
          name:"我的余额",
          color:"#EDB449"
        },
        {
          icon:"location-o",
          name:"我的余额",
          color:"#5A9FEC"
        },
        {
          icon:"service-o",
          name:"我的余额",
          color:"#5A9FEC"
        },
      ]
    }
  },
    mounted(){
        this.$REM.Rem()
        let a = localStorage.code
        let b = JSON.parse(a)
        
    },
    methods: {
      gotothelogin(){
        this.$router.push(this.$routerConfig.thelogin.path)
      }
    },
}
</script>

<style scoped>
    .wrap-header{
      width: 100%;
      height: 1.7rem;
      background-color: #C1B18F;
      position: relative;
    }
    .img{
      width: 1rem;
      height: 1rem;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: 0.3rem;
      left: 0.32rem;
    }
    .Thelogin{
      width: 1rem;
      height: 0.4rem;
      /* background-color: #F5F5F5; */
      position: absolute;
      top: 0.43rem;
      left: 1.45rem;
      font-size: 0.20rem;
      line-height: 0.4rem;
      color: #fff;
    }
    .integral{
      width: 1rem;
      height: 0.3rem;
      background-color: #b3a078;
      position: absolute;
      left: 1.45rem;
      top: 0.85rem;
      border-radius: 0.05rem;
      font-size: 0.13rem;
      color: #fff;
      line-height: 0.3rem;
    }
    .The{
      width: 100%;
      height: 0.45rem;
      /* background-color: yellow; */
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #999;
    }
    .The>div:nth-of-type(1){
      width: 30%;
      height: 0.45rem;
      /* background-color: aqua; */
      line-height: 0.45rem;
      display: flex;
      justify-content: space-around;
    }
     .The>div:nth-of-type(2){
       width: 10%;
       height: 0.45rem;
       line-height: 0.45rem;
     }
    .The>div{
      font-size: 0.15rem;
    }
    .iconfont{
      color: red;
    }
    .Abottom{
      width: 100%;
      height: 0.2rem;
      background-color: #F5F5F5;
      font-size: 0.13rem;
      color: #6d6d6d;
      line-height: 0.2rem;
      text-align: center;
    }
</style>